<template>
  <div class="ladder-vPopup-wrapper" v-show="isShow">
    <div class="vPopup-box basic-bgColor">
      <slot></slot>
    </div>
    <div class="vPopup-overLay basic-bgColor-overLay" @touchstart="handle($event)"></div>
  </div>
</template>
<script>
export default {
  name: 'VPopup',
  props: {
    isShow: {
      type: Boolean,
      default: false,
    },
  },
  methods: {
    handle(e) {
      this.$emit('overLayClick', e);
    },
  },
};
</script>

<style lang="less">
.ladder-vPopup-wrapper {
  width: 100%;
  height: 100%;
  .vPopup-box {
    padding: 0 32px;
    z-index: 220;
  }
  .vPopup-overLay {
    position: fixed;
    z-index: 220;
    width: 100%;
    height: 100%;
  }

  .basic-bgColor {
    background-color: #ffffff !important;
    .dark & {
      background-color: #1c1c1c !important;
    }
  }

  // 弹窗背景颜色
  .basic-bgColor-tooltip {
    background-color: #323232;
    opacity: 0.9;
  }

  // 遮罩背景色
  .basic-bgColor-overLay {
    background-color: rgba(0, 0, 0, 0.6);
  }
}
</style>
